<template>
  <div class="search-store">
    <div class="top">
      <x-address :title="title" :hide-district="true" value-text-align="right" @on-shadow-change="onShadowChange" :list="ChinaAddressV4Data"></x-address>
      <img class="img" src="@/assets/sousuomendian01.png" />
      <div class="div-input">
        <img src="@/assets/sousuomendian02.png" alt="">
        <input type="text" placeholder="可按省市区或输入门店名称搜索">
      </div>
    </div>
    <div class="list border-top" v-if="listLength && listLength.length>0">
      <div class="item">
        <img class="item-img" src="@/assets/xianxiamendian04.png" alt="">
        <div class="cons">
          <p class="title">智保天赋太古汇旗舰店</p>
          <p class="address">
            <span class="address-name">广州市天河区太古汇商广州市天河区太古汇商...</span>
            <span class="address-num">245m</span>
          </p>
          <p class="tip">
            <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
            <span class="tip-con">本线下门店将迎来教育日所有本线下门店将迎来教育日所有...</span>
          </p>
        </div>
      </div>
      <div class="item">
        <img class="item-img" src="@/assets/xianxiamendian04.png" alt="">
        <div class="cons">
          <p class="title">智保天赋太古汇旗舰店</p>
          <p class="address">
            <span class="address-name">广州市天河区太古汇商广州市天河区太古汇商...</span>
            <span class="address-num">245m</span>
          </p>
          <p class="tip">
            <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
            <span class="tip-con">本线下门店将迎来教育日所有本线下门店将迎来教育日所有...</span>
          </p>
        </div>
      </div>
      <div class="item">
        <img class="item-img" src="@/assets/xianxiamendian04.png" alt="">
        <div class="cons">
          <p class="title">智保天赋太古汇旗舰店</p>
          <p class="address">
            <span class="address-name">广州市天河区太古汇商广州市天河区太古汇商...</span>
            <span class="address-num">245m</span>
          </p>
          <p class="tip">
            <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
            <span class="tip-con">本线下门店将迎来教育日所有本线下门店将迎来教育日所有...</span>
          </p>
        </div>
      </div>
      <div class="item">
        <img class="item-img" src="@/assets/xianxiamendian04.png" alt="">
        <div class="cons">
          <p class="title">智保天赋太古汇旗舰店</p>
          <p class="address">
            <span class="address-name">广州市天河区太古汇商广州市天河区太古汇商...</span>
            <span class="address-num">245m</span>
          </p>
          <p class="tip">
            <img class="tip-img" src="@/assets/xianxiamendian03.png" alt="">
            <span class="tip-con">本线下门店将迎来教育日所有本线下门店将迎来教育日所有...</span>
          </p>
        </div>
      </div>
    </div>
    <div class="border-top none" v-else>
      <img src="@/assets/goumaidekecheng01.png" class="result-none" alt="">
      <p>暂无相关结果</p>
    </div>
  </div>
</template>

<script>

import { XAddress, ChinaAddressV4Data } from 'vux'
  export default {
    components: {
      XAddress,
      ChinaAddressV4Data,  
    },
    data () {
      return {
        ChinaAddressV4Data: ChinaAddressV4Data,
        title: '省/市',
        count: 0,
        listLength: 0,
      }
    },
    created () {
    },
    methods: {
      onShadowChange (ids, names) {
        this.count++
        if(this.count <= 1){
          return
        }
        this.title = names[0] + names[1]
      },
    }
  }
</script>

<style lang="stylus" scoped>
.search-store
  background-color #fff
  .top
    position relative
    height 5rem
    .img
      position absolute
      top 2.4rem
      width .7rem
      left 7.3rem
    .div-input
      background-color #f5f5f5
      height 3.5rem
      width calc(100vw - 11rem)
      position absolute
      right 1.6rem
      border-radius 100px
      top 1rem
      img
        width 1.6rem
        position absolute
        z-index 9
        top 1rem
        left 1.2rem
      input
        width 100%
        padding-left 3.8rem
        position absolute
        left 0
        line-height 3.5rem
        height 3.5rem
        top 0
        background-color #f5f5f5
        border-radius 100px
        box-sizing border-box
        outline none
        border none
  .list
    padding 0 2rem
    background-color #fff
    float left
    .item
      padding 1.5rem 0
      display flex
      border-bottom 1px solid #e6e6e6
      &:last-child
        border-bottom none
      .item-img
        width 12.2rem
        height 9.2rem
        margin-right 1rem
      .cons
        flex 1
        .title
          color #333333
          font-size 1.7rem
          font-weight bold
          white-space nowrap
          overflow hidden
          text-overflow ellipsis
          width calc(100vw - 17.2rem)
        .address
          font-size 1.2rem
          color #999
          overflow hidden
          margin 1.3rem 0
          .address-name
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            float left
            width calc(100vw - 22.2rem)
          .address-num
            float right
            text-align right
        .tip
          overflow hidden
          .tip-img
            width 1.6rem
            height 1.6rem
            float left
          .tip-con
            float left
            margin-left .5rem
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            width calc(100vw - 21.2rem)
            color #172F6D
  .border-top
    border-top 1rem solid #f5f5f5
  .none
    position relative
    background-color #fff
    min-height calc(100vh - 6rem)
    .result-none
      position absolute
      width 7.25rem
      top 12.6rem
      left 50%
      margin-left -3.6rem
    p
      font-size 1.3rem
      color #666
      position absolute
      width 100%
      text-align center
      top 25.2rem
</style>
